<!-- 自定义分页插件:: -->
<!--
    <div class="fixedPage"> //外部引用 样式(贴合表格)::.fixedPage { border: 1px solid #e0e0e0; border-top: none; width: calc(100% - 2px); position: absolute; left: 0; bottom: -51px; }
        <mySplitPage
            auto="getAll" (或者callback='getAll') => 分页的当前页或者限制条变化时触发的回调 (备注: auto时 在初始化时立即自动调用 getAll异步请求接口 )
                                                    dad.getAll(0||null||false) => 返回初始化样式 this.currentPage = 1, this.limitTiao = 20
                                                    dad.getAll() => 在外部执行里面的自动刷新接口
                                                    当绑定为函数时 :auto='getAll'||:callback='getAll' => 默认传递参数为 (currentPage,limitTiao)
            pid='1' // 当前插件的父组件的所有数据的 后缀pid => currentPage1(=当前第几页) limitTiao1(=每页限制多少条)
            >
        </mySplitPage>
    </div>
 -->
<template>
    <!-- 分页 -->
    <div style="display: flex;justify-content: flex-end;align-items: center;height: 50px;position: relative;border: 1px solid #ddd;border-top:none;">
        <!-- 本页多少个 -->
        <div id="mainDiv" style="position: absolute;left: 17px;">
            <span v-if="eachPageTiao>0">
                本页有 <span style="margin:0 3px;">{{eachPageTiao}}</span> 条
                <span style="margin-left:10px;">共</span> <span style="margin:0 3px;">{{allTiao}}</span> 条
            </span>
            <span v-else style="margin:0 5px;">没有数据...</span>
            <i class="el-icon-refresh-right bold font18 cPointer" style="color:#409EFF;margin-left:12px;margin-top: -1px;" ref='z1' z-hover='opacity:0.8' @click='compute(160)'></i>
        </div>
        <div id="mainDiv">
            <!-- 上下页分页 -->
            <el-pagination
                asize-change="handleSizeChange"
                @current-change="currentChange"

                :current-page.sync="currentPage"
                :page-size="limitTiao"
                :page-sizes="limitTiaoList"
                :pager-count="Number(btnCount)||7"
                :total="allTiao"

                :background='background!==undefined'
                layout="prev, pager, next, jumper"
                >
            </el-pagination>
            <div id="mainDiv" ref=myAllPages style="margin-left:10px">
                共<div v-html="howPage" style="margin:0 5px;"></div>页
            </div>
            <!-- <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pagerSizeList"
            :page-size="pagerSizeA"
            layout="sizes"
            id="mySplitPage"
            :total="AllNumber" >
            </el-pagination> -->
            <el-select
                v-model="limitTiao"
                placeholder=""
                style="width:75px;margin-left:8px;margin-right:5px;"
                size="mini"
                aref="myTotal"
                ref=z0
                z:e-blur-1input=' const V = $target.value * 1;  if ( #isFocus >= 1 || !V ) return #isFocus = undefined; $this.limitChange( $this.limitTiao = V );  //console.warn(#isFocus, V); '
                z:e-focus-1input=' #isFocus = ++#isFocus || 0; '
                z:on-keydown-enter=' $this.$refs.z0.blur(); //$target.blur(); '
                id="myTotal"
                filterable
                :default-first-option='false'
                @visible-change=" arguments[0] === false && $refs.z0.blur() "
                change="limitChange"
                focus="myFocus"
                blur="myBlur"
                >
                <el-option
                    style=""
                    v-for="(item,index) in limitTiaoList"
                    @click.native='limitChange(item)'
                    :key="index"
                    :label="item"
                    :value="item">
                </el-option>
            </el-select>
            <span style="letter-spacing:0.3em;margin-right:15px;">条/页</span>
        </div>
    </div>
</template>
<script>
    // import { Ajax }  from '@/api/myPost.js';
    var dad, pid, call, start, end, innerCall=false;
    export default {
        ref: true,
        global: false,
        name: "mySplitPage",
        props: ['pid','auto','callback','start','end','btnCount','background','dad','son','dadSon'],
        data: function () {
            return {
                myPid: undefined,
                currentPage: 1, //第几页
                howPage: 1, //共几页
                eachPageTiao: 0,//每页有多少条
                allTiao: 0, //共多少条
                limitTiao: 20, // 每页限制多少条
                limitTiaoList: [5, 10, 20, 30, 50, 100, 200, 300, 400, 500], //每页限制多少条 数组菜单
            }
        },
        // props: ["nowPage","AllNumber","pagerSizeList","currentPage","pagerSize","auto","pagerCount"],
        watch: {
            /*limitTiao(val,old) {
                this.howPage = Math.ceil(this.allTiao / val)||1;
                if(this.innerSet_limitTiao === true) {
                    // setTimeout( ()=>delete this.innerSet_currentPage, 20 );
                    return delete this.innerSet_limitTiao;
                };
                this.innerSet_limitTiao = true;
                dad[ 'limitTiao'+pid ] = val; //更新父组件的 每页限制条数

                this.compute('limitTiao=> ');
            }*/
        },
        methods: {
            limitChange(val) {
                // if ( val === dad[ 'limitTiao'+pid ] ) return;
                this.howPage = Math.ceil(this.allTiao / val)||1;

                // console.error( 'limitTiao',val, dad[ 'limitTiao'+pid ], this.limitTiao );
                this.limitTiao = val; //更新父组件的 每页限制条数
                this.myPid!==undefined && ( dad[ 'limitTiao'+this.myPid ] = val );
                this.compute('limitTiao=> ');
            },

            currentChange(val) {
                // console.error(val);
                /*if(this.innerSet_currentPage === true) return delete this.innerSet_currentPage;
                this.innerSet_currentPage = true;*/
                this.currentPage = val; //更新父组件的 当前第几页
                this.myPid!==undefined && ( dad[ 'currentPage'+this.myPid ] = val );

                this.compute('currentPage=> ');
            },

            compute(name,bool) {
                // console.error(name);
                delete this.isEmpty;
                const call = this.CALL;
                if( !call ) return;
                // console.log( dad, call, this, call.N );
                // console.log(start,end);

                innerCall = true;
                call.start && call.start(this,bool);

                call.waitAny(this.currentPage||1,this.limitTiao).run(res=>{
                    // console.warn(name,res,then);
                    call.end && call.end(res,this,bool,name*1);
                    if( res.items ) {
                        const how = this.eachPageTiao = res.items.length||0;
                        const total = this.allTiao = res.total||0;
                        if ( how === 0 && total > 0 ) {
                            console.log('长度为0',this.currentPage);
                            this.myPid!==undefined && ( dad[ 'currentPage'+this.myPid ] = this.currentPage );
                            this.compute.sleep(20,'初始化');
                        }else {
                            const pid = this.myPid;
                            pid !== undefined && setTimeout(()=>{
                                dad[ 'limitTiao'+pid ] = this.limitTiao;
                                dad[ 'currentPage'+pid ] = this.currentPage;
                                // console.warn(this,dad,pid,this.currentPage,this.limitTiao);
                            },0);
                        };
                    }else {
                        this.eachPageTiao = 0;
                        this.allTiao = 0;
                    };
                });
            }
        },
        created() {
            // console.error(this.dad);
            dad = this.parseDadSon('mySplitPage');
            pid = this.pid;

            if( pid!==undefined ) {
                pid !== '' && ( pid = '_' + pid );
                this.myPid = pid;
                // console.error(pid,dad);
                // dad['currentPage'+pid] = this.currentPage;
                dad.myBind( 'currentPage'+pid, val=> {
                    // if(this.innerSet_currentPage === true) return delete this.innerSet_currentPage;
                    this.currentPage = val;
                    // console.error(this,val,pid);
                    // this.innerSet_currentPage = true;
                }, this.currentPage);
                // dad['limitTiao'+pid] = this.limitTiao;
                dad.myBind( 'limitTiao'+pid, val=> {
                    // if(this.innerSet_limitTiao === true) return delete this.innerSet_limitTiao; //delete this.innerSet_currentPage;
                    this.limitTiao = val;
                    // this.innerSet_limitTiao = true;
                    // this.innerSet_currentPage = true;
                }, this.limitTiao);
            };

            start = this.start;
            start && typeof start !== 'function' && typeof (start=dad[start]) !== 'function' && ( start = null );

            end = this.end;
            end && typeof end !== 'function' && typeof (end=dad[end]) !== 'function' && ( end = null );

            const auto = this.auto;
            call = auto||this.callback;

            this.CALL = false;

            // console.error(pid,dad);

            if ( (this.CALL=call) && typeof call !== 'function' ) {
                // console.warn(this.auto,call,dad,dad[call]);
                const dadCall = dad[call];
                if( typeof dadCall === 'function' ) {
                    // dad[ auto+'0' ] = ()=> (this.currentPage = 1, this.limitTiao = 20 ),
                    // dad[ auto+'1' ] = this.compute.bind(this,'初始化=>')
                    call = this.CALL = dad[call] = (bool)=>{
                        if( arguments.length && !bool ) return (this.currentPage = 1, this.limitTiao = 20 );
                        // console.warn(this,this.currentPage,this.limitTiao);
                        !innerCall ? this.compute('初始化=>',bool) : ( dadCall(this.currentPage,this.limitTiao), innerCall = false );
                    };
                    call.N = this.auto;
                    call.start = start, call.end = end;
                }else {
                    call = null;
                }
            }else {
                call.start = start, call.end = end;
            };

            auto && this.compute('初始化=>');
            /*dad.myBind( 'eachPageTiao'+pid, val=> {
                this.eachPageTiao = val;
            } );
            dad.myBind( 'allTiao'+pid, val=> {
                this.allTiao = val;
            } );*/

        },
        mounted() {

        },
    }
</script>
<style scoped>
    #mainDiv {
        display: flex;
        align-items: center;
        margin-right: 10px;
        font-weight: 400;
        color: #606266;
        font-size: 13px;
        height: 28px;
        line-height: 28px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
